//import LoadingUrl from "@/assets/loading.svg"; //打包后的路径是 http://localhost:8080/img/loading.7d26db10.svg 其实并没有img路径文件夹，它是被处理成base64码

import LoadingUrl from "../../../public/staic/loading.svg";
import styles from "./index.module.less";

// 得到el中loading效果的img元素
function getLoadingImage(el) {
    el.style.position = 'relative';
    return el.querySelector("img[data-role=loading]");//bug 如果子孙节点有v-loading过，他自己就不能在v-loading了,解决办法，选择img元素的时候再看一下它的父级是不是自己
}

function createImageElement(){
    let img = document.createElement('img');
    img.src = LoadingUrl;
    img.dataset.role = 'loading';
    img.className = styles.loading;
    return img;
}

export default function(el,binding){
    let pageImageLoader = getLoadingImage(el);
    // 根据 binding.value 的值，决定创建或删除img元素
    if(binding.value){ //显示
        if (!pageImageLoader) { //vonde更新的时候会调用，所以要在没有这个元素的时候才插入
            const img = createImageElement();
            el.appendChild(img);
        }
    }else{
        if(pageImageLoader){
            pageImageLoader.remove(); //将自己移除了
        }
    }
}